<template>
  <div>
    <div class="common-form">活动商品</div>
    <el-form-item label="商品管理" prop="tableData" :rules="rulesProduct">
      <el-button icon="Plus" @click="changeProduct(form.tableData)">选择商品</el-button>
      <div class="pt16">
        <el-table :data="activeProductData" border style="width: 100%" stripe>
          <el-table-column label="商品名称" width="300">
            <template #default="scope">
              <p class="text-ellipsis-2">{{ scope.row.productName }}</p>
            </template>
          </el-table-column>
          <el-table-column label="规格" width="180" prop="specType"> </el-table-column>
          <el-table-column label="生产部门" width="180">
            <template #default="scope">
              <el-select :disabled="true" v-model="scope.row.produceAddress" size="default" filterable style="width: 80%">
                <template v-for="cat in adressData" :key="cat.produceAddrId">
                  <el-option :value="cat.produceAddrId" :label="cat.produceName"></el-option>
                </template>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="秒杀价">
            <template #default="scope">
              <el-input size="small" :class="{ isvalid: scope.row.priceValid == true }" type="number" min="0" step="0.01" v-model="scope.row.seckillPrice"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="秒杀库存">
            <template #default="scope">
              <el-input size="small" :class="{ isvalid: scope.row.stockValid == true }" type="number" min="0" v-model="scope.row.seckillStock"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="提货时间" width="180" prop="deliveryTime"></el-table-column>
          <el-table-column prop="productPrice" label="售价"></el-table-column>
          <el-table-column prop="salesActual" label="已售"></el-table-column>
          <el-table-column label="限购数量">
            <template #default="scope">
              <el-input size="small" :class="{ isvalid: scope.row.limitNumValid == true }" type="number" min="1" v-model="scope.row.limitNum"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="虚拟销量">
            <template #default="scope">
              <el-input size="small" :class="{ isvalid: scope.row.sortValid == true }" type="number" min="0" v-model="scope.row.salesInitial"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="排序">
            <template #default="scope">
              <el-input size="small" :class="{ isvalid: scope.row.sortValid == true }" type="number" min="0" v-model="scope.row.sort"></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" :width="type == 'edit' ? 90 : 60">
            <template #default="scope">
              <el-button v-if="type == 'edit'" @click="showFunc(scope.$index, scope.row)" type="text" size="small">{{ scope.row.isDelete == 0 ? "隐藏" : "显示" }}</el-button>
              <el-button @click="deleteClick(scope.$index, true)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form-item>

    <!--商品选择-->
    <Product :isProduct="isProduct" :excludeIds="excludeIds" :islist="true" @closeDialog="closeDialogFunc" :defaultCateId="2"></Product>
  </div>
</template>

<script>
import Product from "@/components/product/Product.vue";
import Specs from "@/components/product/Specs.vue";
import { mergeTable } from "@/utils/table.js";
export default {
  components: {
    /*选择商品组件*/
    Product,
    /*选择规格*/
    Specs,
  },
  data() {
    return {
      /*是否打开选择商品*/
      isProduct: false,
      /*产品去重*/
      excludeIds: [],
      /*是否打开规格选择*/
      isspecs: false,
      /*查询规格当前商品*/
      curProduct: {},
      /*当前的角标索引*/
      curIndex: -1,
      /*选择规格*/
      specType: false,
      /*规格去重*/
      SpecExcludeIds: [],
      /*批量秒杀价*/
      all_seckill_price: null,
      /*批量秒杀库存*/
      all_seckill_stock: null,
      /*批量限购*/
      all_limit_num: null,
      adressData:[], //基地 
      activeProductData:[]  //活动商品
    };
  },
  props: {
    form: Object,
    type: String,
  },
  created() {},
  methods: {
    /*打开添加*/
    changeProduct(list) {
      let arr = [];
      list.forEach((item) => {
        arr.push(item.productId);
      });
      this.excludeIds = arr;
      this.isProduct = true;
    },

    /*关闭弹窗*/
    closeDialogFunc(e) {
      console.log('选择的商品',e)
      let $this  = this;
      if (e && e.type == "success") {
          $this.adressData = e.adressData
          for(let i=0;i<e.params.length;i++) {
            const item = e.params[i]
            let product= {
              productId:item.productId,
              productName:item.productName, //商品名称
              specType:item.spec, //规格
              produceAddress:item.produceAddress, //生产部门
              seckillPrice:0,//秒杀价
              seckillStock:0 ,//秒杀库存
              deliveryTime:item.deliveryTime ,//提货时间 
              productPrice:item.productPrice,  //售价
              salesActual:0 ,//已售
              limitNum:0, //限购 
              salesInitial:0,//虚拟销量
              sort:1,//排序 
            }
            $this.activeProductData.push(product)
          }
          $this.form.productList  = $this.activeProductData
      }
       $this.isProduct = false;
    },
    /*删除*/
    deleteClick(e, isType) {
    },
  },
};
</script>

<style lang="scss" scoped>
.spec-min-box {
  position: relative;
}
.spec-min-box > i {
  position: absolute;
  right: 0;
  font-size: 16px;
  cursor: pointer;
}
.spec-min-box .el-icon-close {
  top: 0;
  color: red;
  visibility: hidden;
}
td:hover .spec-min-box .el-icon-close {
  visibility: visible;
}
.spec-min-box .el-icon-caret-right {
  bottom: 0;
  transform: rotate(45deg);
  color: #3a8ee6;
}
.el-form-item.is-error .active-all-set .el-input__inner,
.el-form-item.is-error .isvalid .el-input__inner {
  border-color: #c0c4cc;
}
</style>
